<template>
    <div>
        <nav-bar>
            <template v-slot:default>
                修改密码
            </template>
        </nav-bar>
        <div style="margin-top:  50px; padding-top: 40px;">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                        v-model="old_password"
                        type="password"
                        name="旧密码"
                        label="旧密码"
                        placeholder="旧密码"
                        :rules="[{require:true,message:'请填写密码'}]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{require:true,message:'请填写密码'}]"
                    />
                    <van-field
                        v-model="password_confirmation"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{require:true,message:'请填写一致密码'}]"
                    />
                    
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="success" native-type="submit">保存修改</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<!--  placeholder:占位符 label:标签 rules；规则 confirmation:确认 native:本地 notify:通知-->
<style>
.link-login{
    font-size: 14px;
    margin-bottom: 20px;
    color: #42b983;
}
</style>
<script>
import NavBar from '@/components/common/NavBar/NavBar.vue';
import { reactive,toRefs } from 'vue';
import { updatePwd } from '@/network/user';
import { Notify,Toast } from 'vant';
import { useRouter } from 'vue-router';
export default({
    name:"UpdatePwd",
    components:{
        NavBar
    },
    setup(){
        const router = useRouter;
        const userinfo = reactive({
            old_password:"",
            password:"",
            password_confirmation:"",
        });
      
        const onSubmit=()=>{
            console.log(1111);
            // 先验证
            if(userinfo.password!=userinfo.password_confirmation){
                Notify({type:'success',message:'两次密码不一致'})
                // 提交给服务器
            }else{
                updatePwd(userinfo).then(res=>{
                    console.log(res);
                    if(res.status=='204'){
                        Toast.success('修改成功')
                        setTimeout(()=>{
                           router.go(-1);
                        },1000)
                    }
                    
                    userinfo.password_confirmation='';
                    userinfo.password='';
                })
            }
        }
        return{
            ...toRefs(userinfo),
            onSubmit
        }
    }
})
</script>
<!-- confirmation:确认 -->